
import './index.scss'
import { Form, Button, Input } from 'antd-mobile';
import { useRef, useState, useEffect } from 'react'
import ry from '../../img/ry.png'
import hw from '../../img/hw.svg'
import { loginAction } from '../../store/actions/user';
import { connect } from 'react-redux';
import { getSmsCode, login } from '../../api'
import { useNavigate } from 'react-router-dom';
const Login = (props) => {
    const [phone, setPhone] = useState('')
    const [smscode, setsmsCode] = useState('')
    const [btnText, setBtnText] = useState('获取验证码')
    const [disabled, setDisabled] = useState(false)

    const { loginAction } = props
    const navgate = useNavigate()
    let timer = useRef(null);
    useEffect(() => {
        return () => {
            timer.current = null
        }
    }, [])


    const loginFN = () => {

        login(phone, smscode).then(res => {
            console.log(res);
            if (phone !== '' && smscode !== '') {
                if (res.data.code === 666) {

                    loginAction(res.data.result)
                    navgate('/me')
                }

            }
        })

    }
    const changeInput = (type, val) => {

        if (type === 'phone') {
            setPhone(val)
        } else {
            setsmsCode(val)
        }
    }

    const getSmsCodeFn = () => {
        if (phone !== '') {
            getSmsCode(phone).then(res => {
                console.log(res);
                if (res.data.code === 666) {
                    let num = 10;
                    setBtnText(`重新获取(${num})`)
                    setDisabled(true)
                    timer.current = setInterval(() => {
                        num--;
                        setBtnText(`重新获取(${num})`)
                        if (num <= 0) {
                            clearInterval(timer.current)
                            setBtnText("重新获取")
                            setDisabled(false)
                        }

                    }, 1000)
                }
            })
        } else {
            alert('请输入正确的手机号码')
        }


    }


    return <div>
        <div className="wrap">
            <div className="title1">
                <div className="center"><img src={ry} alt="" /></div>
                <div className="headr-title">荣耀账号</div>
            </div>
            <div className="content">
                <div className="country">
                    <div className="code">国家或地区</div>
                    <div className="china">中国</div>
                </div>

                <Form name='from'>

                    <Form.Item name='phone' label="手机号" rules={[{ required: true, message: "手机号不能为空" }]} className='china-type'>

                        <Input type='number' value={phone} minLength='11' onChange={(val) => { changeInput('phone', val) }} className='type-phone'></Input>
                    </Form.Item>
                    <Form.Item name='smscode' label="短信验证码" rules={[{ required: true, message: '验证码不能为空' }]}>

                        <Input type='number' value={smscode} onChange={(val) => { changeInput('smaCode', val) }} className='input-sms'></Input>

                    </Form.Item>
                    <Form.Item>


                        <Button color='primary' disabled={disabled} onClick={getSmsCodeFn} className='login-right'>{btnText}</Button>
                    </Form.Item>

                    <div className="select">
                        中国<span>(+86)</span>▶
                    </div>
                    <div className="line">
                        密码登录
                    </div>



                    <Button type='button' className="login" color='primary' size='large' onClick={loginFN}>  登录/注册</Button>

                </Form>

                <div className="slide">
                    <input type="checkbox" />


                    本人已阅读并同意
                    <a href="###">荣耀帐号用户协议</a>
                    ，知悉
                    <a href="###">关于荣耀帐号与隐私的声明</a>
                    ,同意账号
                    <span className="string">联网</span>并
                    <span className="string">读取设备信息</span>、调用
                    <span className="string">通知</span>权限、查找设备查看
                    <span className="string">精确位置</span>。
                </div>
                <div className="pro">
                    遇到问题
                </div>
                <div className="tips">
                    三方账号登录
                </div>
                <div className="picture">
                    <img src={hw} alt="" />

                </div>

            </div>

        </div >
    </div >

}
export default connect(state => ({
    user: state.user
}), { loginAction })(Login)